<script setup>
import { ref, defineEmits,defineProps } from "vue";

// 定义 `emit` 事件来通知父组件菜单项点击
const emit = defineEmits(['selectKey']);

const props = defineProps({
    menuItems: {
      type: Array,
      default: () =>[]
  }
})

const currentKey = ref("info");

const selectKey = ({ key }) => {
  currentKey.value = key;
  const targetElement = document.querySelector(`#${key}`);

  if (targetElement) {
    // 延时确保滚动触发
    setTimeout(() => {
      window.scrollTo({
        top: targetElement.offsetTop - 20, // 调整为顶部20px的偏移量
        behavior: "smooth", // 平滑滚动
      });
    }, 100); // 延时100毫秒
  }
    emit('selectKey', key);
};
</script>

<template>
  <a-menu
    :selectable="false"
    mode="vertical"
    @click="selectKey"
    style="width: 200px"
  >
    <a-menu-item v-for="item in props.menuItems" :key="item.key">
      {{ item.label }}
    </a-menu-item>
  </a-menu>
</template>

<style scoped>
a-menu {
  border-right: 1px solid #f0f0f0;
  height: 100%;
}

</style>
